<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
#box{
	width: 500px;
	height: 300px;
	border: 10px;
	padding: 8px;
	margin: 15px;
	overflow:auto; 
}
#box>div{
	width: 700px; height: 500px;background: #555;
}

</style>
<body>
	<div id="box">
		<div></div>
	</div>

</body>
<script type="text/javascript">
var arr=["clientWidth","clientHeight","offserwidth","offsetHeight","scrollWidth","scrollHeight"];
/*
clientWidth:padding+width
offsetWidth:padding+border+width
scrollWidth:里面内容所占的宽度+padding*1
scrollHeight:里面内容所占的高度+padding*2

 */
var box =document.getElementById("box");
for (var i = 0; i < arr.length; i++) {
	console.log(arr[i]+"---"+box[arr[i]]);
}




/*
width height
clientWidth clientHeight//不包括边框
offserwidth offsetHeight//包括边框
scrollWidth scrollHeight//包括滚动条的部分
*/
</script>
</html>